<template>
    <el-dialog title="车皮录入" :visible.sync="dialogForm" width="1100px" style="margin-top: -11vh">
        <el-form :inline="true" :model="condition" class="search-form" label-width="100px">
            <el-row>
                <el-col :span="8">
                    <el-form-item label="箱号">
                        <el-input v-model="condition['search_LIKE_containerNo']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业时间起">
                        <el-date-picker v-model="condition['search_GTE_planJobDate']"
                                        :picker-options="startPickerOptions" type="date" placeholder="起始日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                </el-col>
                <el-col :span="8">
                    <el-form-item label="作业时间止">
                        <el-date-picker v-model="condition['search_LTE_planJobDate']"
                                        :picker-options="endPickerOptions" type="date" placeholder="结束日期"
                                        format="yyyy-MM-dd" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                </el-col>
            </el-row>
            <el-row>
                <el-col :span="8">
                    <el-form-item label="到站">
                        <el-input v-model="condition['search_LIKE_endStationName']"></el-input>
                    </el-form-item>
                </el-col>
                <el-col :span="16">
                    <el-button type="primary" icon="el-icon-search" @click="loadData" class="ml-100">查 询</el-button>
                    <excel-import code="ZC" @getUploadData="handleImport"></excel-import>

                </el-col>
            </el-row>
        </el-form>
        <el-alert title="" class="alert-color" type="success" :closable="false">
            <div>
                集装箱数量：{{ containerInfo.length }}
            </div>
            <span v-show="count.length>0">
                按到站统计：
                <span v-for="item in count" style="margin-right: 10px">{{ item.name }} {{ item.total }}</span>
            </span>
        </el-alert>
        <el-table ref="multipleTable" :data="containerInfo" border stripe max-height="500" class="mt-20">
            <el-table-column fixed="left" type="index" label="序号" width="55"></el-table-column>
            <el-table-column prop="jobStatus" label="状态"  min-width="100">
                <template slot-scope='scope'>
                    <div v-if="condition['search_EQ_planStatus']==='MOVED'">
                        已移箱
                    </div>
                    <div v-else-if="condition['search_EQ_planStatus']==='RETURNED'">
                        已返场
                    </div>
                    <div v-else>{{scope.row.jobStatus | _filterJobStatus }}</div>
                </template>
            </el-table-column>
            <el-table-column prop="planJobDate" label="作业时间"  min-width="140"></el-table-column>
            <el-table-column prop="endStationName" label="到站"  min-width="120"></el-table-column>
            <el-table-column prop="containerNo" label="箱号"  min-width="150"></el-table-column>
            <el-table-column prop="wagonNo" label="车皮号"  min-width="120">
                <template slot-scope="scope">
                    <div v-if="false">
                        <search-wagon-no @selectName="v=>handleEditWagon(v,scope.row,scope.$index)"
                                         :name="scope.row.wagonNo"></search-wagon-no>
                    </div>
                    <div v-if="true">
                        <el-tag style="cursor: pointer" @click.native="handleWagon(scope.row)">选择车皮</el-tag>
                    </div>
                </template>
            </el-table-column>
            <el-table-column prop="containerType" label="箱型"  min-width="75"></el-table-column>
            <el-table-column prop="containerSize" label="尺寸"  min-width="75"></el-table-column>
            <el-table-column prop="ifHeavy" label="空重"  min-width="75">
                <template slot-scope="scope">
                    {{ scope.row.ifHeavy | _filterIfHeavyType }}
                </template>
            </el-table-column>
            <el-table-column prop="tradeType" label="内外贸"  min-width="100">
                <template slot-scope="scope">
                    {{ scope.row.tradeType | _filterTradeType }}
                </template>
            </el-table-column>
            <el-table-column prop="cargoWeight" label="货重"  min-width="75"></el-table-column>
        </el-table>
        <el-dialog title="选择车皮" :visible.sync="dialogWagon" :modal="false" width="700px">
            <el-form :inline="true" :model="form" class="search-form" label-width="100px">
                <el-row>
                    <el-col :span="12">
                        <el-form-item label="关联箱号:">
                            {{ form.containerNo }}
                        </el-form-item>
                    </el-col>
                    <el-col :span="12">
                        <el-form-item label="车皮号:">
                            <search-wagon-no @selectName="v=>form.wagonNo=v"
                                             :name="form.wagonNo"></search-wagon-no>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="closeForm">取 消</el-button>
                <el-button type="primary" @click="handleSubmit">确 认</el-button>
            </div>
        </el-dialog>
    </el-dialog>
</template>
<script>
    import { editWagonNo, impWagonNo, getJobNoWagonNo, getWagonNoCount } from "@/api/middleControl/middleControl";
    import searchWagonNo from '@/components/autocomplete/autoSearchWagonNo'
    import excelImport from '@/components/excel/import'

    export default {
        components: { searchWagonNo, excelImport },
        data() {
            return {
                dialogForm: false,
                condition: {
                    search_EQ_planStatus: ""
                },
                containerInfo: [],
                name: "",
                multipleSelection: [],
                zl: true,
                voids: true,
                count: [],
                yard: [],
                copyYard: [],
                info: [],
                dialogWagon: false,
                form: {
                    planNo: '',
                    id: '',
                    containerNo: '',
                    wagonNo: '',
                }
            };
        },
        methods: {
            loadData() {
                let params = this.$assist.copySearchConditions(this.condition);
                params.iDisplayLength = 9999
                getJobNoWagonNo(params).then(res => {
                    this.containerInfo = res.data.aaData
                    getWagonNoCount(params).then(response => {
                        this.count = response.data.aaData
                    })
                })
            },
            closeForm() {
                this.dialogWagon = false;
                this.form = {
                    planNo: '',
                    id: '',
                    containerNo: '',
                    wagonNo: '',
                }
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            handleEditWagon(val, item, index) {
                // console.log(val, item)
                // if (val) {
                let data = {
                    planNo: item.planNo,
                    id: item.id,
                    containerNo: item.containerNo,
                    wagonNo: '',
                }
                editWagonNo(data).then(res => {
                    this.loadData()
                })
                // } else {
                //     this.loadData()
                // }
            },
            handleSubmit() {
                if (!this.form.wagonNo) {
                    this.$message({ message: '请选择车皮号!', type: 'error' })
                    return
                }
                editWagonNo(this.form).then(res => {
                    this.$message({ message: '修改成功!', type: 'success' })
                    this.dialogWagon = false
                    this.loadData()
                })
            },
            handleImport(data) {
                console.log(data)
                impWagonNo(data).then(res => {
                    this.$message({ message: '导入成功!', type: 'success' })
                    this.loadData()
                })
            },
            handleWagon(item) {
                this.form = {
                    planNo: item.planNo,
                    id: item.id,
                    containerNo: item.containerNo,
                    wagonNo: '',
                }
                this.dialogWagon = true
                console.log(item)
            },
        },
        computed: {
            startPickerOptions() {
                let endDate = this.condition["search_LTE_planJobDate"];
                return {
                    disabledDate(time) {
                        if (endDate) {
                            return time.getTime() > new Date(endDate).getTime();
                        } else {
                            return false;
                        }
                    }
                };
            },
            endPickerOptions() {
                let startDate = this.condition["search_GTE_planJobDate"];
                return {
                    disabledDate(time) {
                        if (startDate) {
                            return time.getTime() < new Date(startDate).getTime() - 60 * 60 * 24 * 1000;
                        } else {
                            return false;
                        }
                    }
                };
            },
        },
        watch: {
            dialogForm(bool) {
                if (!bool) {
                    this.$emit('load')
                    this.condition = {
                        search_EQ_planStatus: ""
                    }
                    this.$parent.noWagonNo = false
                }
            }
        },
    };
</script>
<style lang="scss" scoped>
</style>
